<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <link href="fonts/font-awesome.min.css" rel="stylesheet" />
    <link href="css/mobile-select-date.css" rel="stylesheet" />
    <link href="css/common.css" rel="stylesheet" />
    <link href="css/chooseCarInsurance.css" rel="stylesheet" />
    <title>e车险保</title>
    <style type="text/css">
        .modal .body{
            margin:0 1.64rem 0 1.64rem;
            background: #fff;
        }
        .modal .body .content{
            position:absolute;
            top:2rem;
            left:0;
            right:0;
            /*bottom:0;*/
            overflow: auto;
            padding:0 1.82rem;
        }
        .modal .body .head{
            height:1.82rem;
            line-height: 1.82rem;
            margin-top:0.91rem;
            margin-right:0.91rem;
        }
        .modal .body .head img{
            height:1.82rem;
            float:right;
        }
        .modal .body{
            top:0;
        }
         .left img.question-icon{
         /*margin-top:-4rem;*/
            /* border:1px solid red;*/
     }
         .box .item .left {
            text-align: left;
            width:auto;
            overflow: visible;
        }
         .box  .item .left span{
            display: inline-block;
            width: 11rem;
            white-space:nowrap;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            overflow: hidden;
             vertical-align: middle;
        }
    </style>
</head>
<body class="bacc">
    <div class="top-title">
        <div class="nav-left"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
        选择险种/修改信息
    </div>
    <div id="box-box">
    <div class="box">
        <div class="title-box"><div class="title">交强险</div></div>
        <div class="item">
            <div class="left">注册日期</div>
            <div class="right has-icon" id="register-date"><input type="date"  placeholder="请输入注册日期" value="2014-01-13"></div>
        </div>
    </div>
    <div class="box">
        <div class="title-box"><div class="title">商业险</div></div>
        <div class="item">
            <div class="left">保险起期</div>
            <div class="right has-icon"><input type="text"  placeholder="请输入保险起期"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
        </div>
        <div class="item">
            <div class="left">保险起期</div>
            <div class="right has-icon"><input type="tel"  placeholder="请输入手机号"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
        </div>

        <div class="item">
            <div class="left"><span>车辆损失险</span><img class="question-icon" src="images/question@3x.png" alt=""></div>
            <div class="middle">
                <div class="chec-one">
                    <input type="checkbox" value="1" id="one" name="" class="hide"/>
                    <label for="one"></label>
                </div>
                不计免赔
            </div>
            <div class="right has-icon">
                <select>
                    <option>投保</option>
                    <option>不投保</option>
                </select>
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
        </div>
        <div class="item">
            <div class="left"><span>第三方责任险</span><img class="question-icon" src="images/question@3x.png" alt=""></div>
            <div class="middle">
                <div class="chec-one">
                    <input type="checkbox" value="1" id="two" name="" class="hide"/>
                    <label for="two"></label>
                </div>
                不计免赔
            </div>
            <div class="right has-icon">
                <select>
                    <option>1万</option>
                    <option>2万</option>
                    <option>3万</option>
                    <option>4万</option>
                    <option>5万</option>
                </select>
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
        </div>
        <div class="item">
            <div class="left"><span>司机座位险</span><img class="question-icon" src="images/question@3x.png" alt=""></div>
            <div class="middle">
                <div class="chec-one">
                    <input type="checkbox" value="1" id="three" name="" class="hide"/>
                    <label for="three"></label>
                </div>
                不计免赔
            </div>
            <div class="right has-icon">
                <select>
                    <option>1万</option>
                    <option>2万</option>
                    <option>3万</option>
                    <option>4万</option>
                    <option>5万</option>
                </select>
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
        </div>
        <div class="item">
            <div class="left"><span>乘客座位险</span><img class="question-icon" src="images/question@3x.png" alt=""></div>
            <div class="middle">
                <div class="chec-one">
                    <input type="checkbox" value="1" id="four" name="" class="hide"/>
                    <label for="four"></label>
                </div>
                不计免赔
            </div>
            <div class="right has-icon">
                <select>
                    <option>1万</option>
                    <option>2万</option>
                    <option>3万</option>
                    <option>4万</option>
                    <option>5万</option>
                </select>
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
        </div>
        <div class="item">
            <div class="left"><span>盗抢险</span><img class="question-icon" src="images/question@3x.png" alt=""></div>
            <div class="right has-icon">
                <select>
                    <option>投保</option>
                    <option>不投保</option>
                </select>
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
        </div>
        <div class="item">
            <div class="left"><span>划痕险</span><img class="question-icon" src="images/question@3x.png" alt=""></div>
            <div class="right has-icon">
                <select>
                    <option>投保</option>
                    <option>不投保</option>
                </select>
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
        </div>
        <div class="item">
            <div class="left"><span>涉水险</span><img class="question-icon" src="images/question@3x.png" alt=""></div>
            <div class="right has-icon">
                <select>
                    <option>投保</option>
                    <option>不投保</option>
                </select>
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
        </div>
        <div class="item">
            <div class="left" title="(不计免赔)自燃险自燃险自燃险自燃险自燃险自燃险"><span onclick="showText(this,'无法找到第三方特约险无法找到第三方特约险无法找到第三方特约险无法找到第三方特约险')">(不计免赔)自燃险自燃险自燃险自燃险自燃险自燃险</span><img class="question-icon" src="images/question@3x.png" alt=""></div>
            <div class="right has-icon">
                <select>
                    <option>投保</option>
                    <option>不投保</option>
                </select>
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
        </div>
        <div class="item">
            <div class="left" title="无法找到第三方特约险无法找到第三方特约险无法找到第三方特约险无法找到第三方特约险"><span onclick="showText(this,'无法找到第三方特约险无法找到第三方特约险无法找到第三方特约险无法找到第三方特约险')">无法找到第三方特约险无法找到第三方特约险无法找到第三方特约险</span><img class="question-icon" src="images/question@3x.png" alt=""></div>
            <div class="right has-icon">
                <select>
                    <option>投保</option>
                    <option>不投保</option>
                </select>
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
        </div>
    </div>
    </div>
    <div class="button">
        <input type="button" value="下一步" id="to-next">
    </div>

    <div class="modal hide">
        <div class="body">
            <div class="head">
                <img src="images/close.png" class="close">
            </div>
            <div class="content">

            </div>
        </div>
    </div>
    <div class="mask hide"></div>
    <div class="text">
        <span></span>
        <div class="arrow"></div>
    </div>
</body>
</html>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/dialog.js"></script>
<script src="js/mobile-select-date.js"></script>
<script src="js/common.js"></script>
<script>
    $("#to-next").click(function(){
        window.location.href = "carInsurancePrice.html";
    });
    $(".question-icon").click(function(){
        var text = $(this).parent().find("span").text();
        $.getJSON("data/insurance.json",function(data){
            var content = data[text];
            if(content){
                $(".modal .content").html(content);
                $(".modal").removeClass("hide");
                $(".mask").removeClass("hide");
            }
        });
    });

    function showText(el,text){
        event.stopPropagation();
        $(".text").css({"top":$(el).position().top,left:$(el).position().left+11+"px"});
        $(".text span").text(text);
        $(".text").show();
    }
    $("#box-box").click(function(){
       $(".text").hide();
    });
</script>